// 初始化 会话标签 和 好友标签，实现切换功能
function initSwitchTab() {

    // 拿到 会话标签对象 和 好友标签对象
    let tabSession = document.querySelector('.tab .tab_session');
    let tabFriend = document.querySelector('.tab .tab_friend');

    // querySelectorAll() 可以选中该 CSS类的所有元素，拿到的结果为一个数组
    let lists = document.querySelectorAll('.list');

    // 给会话标签对象 设置 点击事件反馈
    tabSession.onclick = function() {
        // 换图（换色）
        // 此处代码执行在 html 文件，故 url() 地址以 html 文件为视角
        tabSession.style.backgroundImage = 'url(images/talk2.png)';
        tabFriend.style.backgroundImage = 'url(images/friend1.png)';

        // 换 CSS类（隐藏）
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    // 给好友标签对象 设置 点击事件反馈
    tabFriend.onclick = function() {
        // 换图（换色）
        tabSession.style.backgroundImage = 'url(images/talk1.png)';
        tabFriend.style.backgroundImage = 'url(images/friend2.png)';

        // 换 CSS类（隐藏）
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

// 页面加载时调用
initSwitchTab();

/////////////////////////////////////////////////////////////////////////////////////

let websocket = new WebSocket('ws://127.0.0.1:8080/webSocketMessage');
websocket.onopen = function() {
    console.log("websocket 连接成功！");
}

websocket.onmessage = function(e) {
    console.log("websocket 收到消息！ " + e.data);

    let resp = JSON.parse(e.data);

    if (resp.type == 'message') {
        handleMessage(resp);
    } else {
        console.log("resp.type 不符合要求！");
    }
}

websocket.onclose = function() {
    console.log("websocket 连接关闭！");
}

websocket.onerror = function() {
    console.log("websocket 连接异常！");
}

// 新消息弹出
function handleMessage(resp) {
    let curSessionLi = findSessionLi(resp.sessionId);
    let sessionListUL = document.querySelector("#session_list");

    if (curSessionLi == null) {
        getSessionList()
        sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
        /*
        let curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message_session_id', resp.sessionId);
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>' + '<p>' + '</p>';

        curSessionLi.onclick = function() {
            clickSession(curSessionLi);
        }
        let sessionListUL = document.querySelector("#session_list");
        // 用 insertBefore()方法 将指定消息会话置顶（数组的自带方法）
        sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
        curSessionLi.click();
        */
    }

    // 更新 预览文本
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }

    // 拿到 会话列表
    // 将 指定会话 在 会话列表 中置顶
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);

    // 判断如果 指定会话 为选中状态
    if (curSessionLi.className == 'selected') {

        // 拿到 消息框
        let messageShowDiv = document.querySelector('.right .message_show');

        // 用 消息对象 构造一个 消息标签，放入 消息框 中
        addMessage(messageShowDiv, resp);

        // 将 消息框 设置 可滚动
        scrollBotton(messageShowDiv);
    }
}

function findSessionLi(targetSessionId) {
    let sessionLis = document.querySelectorAll('#session_list li');
    for (let li of sessionLis) {
        let sessionId = li.getAttribute('message_session_id');
        if (sessionId == targetSessionId) {
            return li;
        }
    }
    return null;
}

//////////////////////////////////////////////////////////////////////////////////

// 发送按钮
function initSendButton() {
    let sendButton = document.querySelector('.right .ctrl button');
    let messageInput = document.querySelector('.right .message_input');

    // 对话框内容判空
    sendButton.onclick = function() {
        if (!messageInput.value) {
            return;
        }

        // 拿会话id
        let sessionLi = document.querySelector('#session_list .selected');
        if (sessionLi == null) {
            return
        }
        let sessionId = sessionLi.getAttribute('message_session_id');

        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        req = JSON.stringify(req);
        websocket.send(req);
        console.log("[websocket] send:" + req);

        messageInput.value = '';
    }
}

// 页面加载时调用
initSendButton();

////////////////////////////////////// 用户模块：获取用户信息功能/////////////////////////////////////////////////
function getUserInfo() {
    $.ajax({
        type: 'get',
        url: 'userInfo',

        success: function(body) {
            if (body.userId && body.userId > 0) {
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = body.username;

                userDiv.setAttribute("user_id", body.userId);
            } else {
                alert("用户尚未登陆");
                location.assign('login.html');
            }
        }
    });
}
getUserInfo();
////////////////////////////////////// 用户模块：获取用户信息功能/////////////////////////////////////////////////

////////////////////////////////////// 好友模块：获取好友数据功能/////////////////////////////////////////////////
function getFriendList() {

    $.ajax({
        type: 'get',
        url: 'friendList',

        success: function(body) {

            let friendListUL = document.querySelector('#friend_list');
            friendListUL.innerHTML = '';

            for (let friend of body) {

                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';

                // 标签属性设置（在前端存储好友的 用户Id ）
                li.setAttribute('friend_id', friend.userId);

                friendListUL.appendChild(li);

                li.onclick = function() {
                    clickFriend(friend);
                }
            }
        },
        error: function() {
            console.log('获取好友列表失败!');
        }
    });
}
getFriendList();
////////////////////////////////////// 好友模块：获取好友数据功能/////////////////////////////////////////////////

////////////////////////////////////// 会话模块：获取历史会话功能/////////////////////////////////////////////////
function getSessionList() {
    $.ajax({
        type: 'get',
        url: '/sessionList',

        success: function(body) {
            let sessionListUL = document.querySelector('#session_list');
            sessionListUL.innerHTML = '';

            for (let session of body) {

                // 处理 最近的一条消息；判断其长度是否超过 10 个字，若超过，则截断
                if (session.lastMessage > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10) + '...';
                }

                let li = document.createElement('li');
                // 给该会话标签 设置属性，存储会话 id 信息（前端存储数据）
                li.setAttribute('message_session_id', session.sessionId);

                // 给该会话标签 命名会话标题
                li.innerHTML = '<h3>' + session.friends[0].friendName + '<h3>' +
                    '<p>' + session.lastMessage + '<p>';

                sessionListUL.appendChild(li);

                li.onclick = function() {
                    clickSession(li);
                }
            }
        }
    });
}
getSessionList();
////////////////////////////////////// 会话模块：获取历史会话功能/////////////////////////////////////////////////

// 将指定消息会话标签 添加上 CSS类（变色）、获取其历史消息
function clickSession(currentLi) {

    // 拿到会话列表标签下的 所有会话标签
    let allLis = document.querySelectorAll('#session_list>li');
    // 在所有会话标签中找到目标会话，添加上 CSS类（变色），其它标签设为正常状态
    activeSession(allLis, currentLi);

    // 拿到 目标会话 的 会话Id
    let sessionId = currentLi.getAttribute('message_session_id');
    // 通过 会话Id 获取该会话的历史消息
    getHistoryMessage(sessionId);
}

// 在所有会话标签中找到目标会话，添加上 CSS类（变色），其它标签设为正常状态
function activeSession(allLis, currentLi) {
    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}

////////////////////////////////////// 消息模块：获取历史消息功能/////////////////////////////////////////////////
function getHistoryMessage(sessionId) {

    console.log("获取历史消息 sessionId = " + sessionId);

    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '';

    let messageShowDiv = document.querySelector('.right .message_show');
    messageShowDiv.innerHTML = '';

    let selectedH3 = document.querySelector('#session_list .selected>h3');
    if (selectedH3 != null) {
        titleDiv.innerHTML = selectedH3.innerHTML;
    }

    $.ajax({
        type: 'get',
        url: 'message?sessionId=' + sessionId,

        success: function(body) {
            for (let message of body) {
                addMessage(messageShowDiv, message);
            }
            scrollBotton(messageShowDiv);
        }
    });
}
////////////////////////////////////// 消息模块：获取历史消息功能/////////////////////////////////////////////////

// 用 消息对象 构造一个消息标签，放入聊天框中
function addMessage(messageShowDiv, message) {

    // 创建一个 消息标签（间接载体）
    let messageDiv = document.createElement('div');

    // 创建一个 消息标签（直接载体）
    let boxDiv = document.createElement('div');
    boxDiv.className = 'box';

    // 创建一个 用户名字标签（直接载体 或 简介载体）
    let nameDiv = document.createElement('div');

    // 创建一个 消息内容标签（直接载体）
    let contentP = document.createElement('p');

    // 拿到当前登录用户的用户名
    let selfUsername = document.querySelector('.left .user').innerHTML;

    // 判断此消息的 来源用户 是否为 当前登录用户
    if (selfUsername == message.fromName) {

        // 判定 是

        // 设置 CSS类；靠右
        messageDiv.className = 'message message_right';
        nameDiv.className = 'name me';

        // 创建一个 用户名字标签（直接载体）
        // 赋值
        let myName = document.createElement('div');
        myName.innerHTML = selfUsername;

        // 放入间接载体中
        nameDiv.appendChild(myName);
    } else {

        //判定 否

        // 设置 CSS类，靠左
        messageDiv.className = 'message message_left';
        nameDiv.className = 'name';

        // 赋值
        nameDiv.innerHTML = message.fromName;
    }

    // 将 用户名字标签 放入 消息标签（直接载体）
    boxDiv.appendChild(nameDiv);

    // 赋值
    // 将 消息内容标签 放入 消息标签（直接载体）
    contentP.innerHTML = message.content;
    boxDiv.appendChild(contentP);

    // 将直接载体放入间接载体
    messageDiv.appendChild(boxDiv);

    // 将 消息标签 放入 消息显示区域标签
    messageShowDiv.appendChild(messageDiv);
}

function scrollBotton(elem) {

    // 拿到 显示高度
    let clientHeight = elem.offsetHeight;

    // 拿到 实际高度
    let scrollHeight = elem.scrollHeight;

    // 设置可滚动
    elem.scrollTo(0, scrollHeight - clientHeight);
}

////////////////////////////////////// 会话模块：新增会话功能/////////////////////////////////////////////////
function clickFriend(friend) {

    // 拿到 消息会话 或 无效空对象
    let sessionLi = findSessionByName(friend.friendName);
    // 拿到 消息会话列表下的 所有消息会话（数组）
    let sessionListUL = document.querySelector("#session_list");

    // 判断拿到的消息会话是否为有效会话
    if (sessionLi != null) {

        // 用 insertBefore()方法 将指定消息会话置顶（数组的自带方法）
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);

        // 模拟点击
        sessionLi.click();
    } else {

        // 创建一个消息会话标签
        // 赋值
        // 置顶
        let sessionLi = document.createElement('li');
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);

        // 给消息会话标签 设置 点击事件反馈
        sessionLi.onclick = function() {

            // 选中
            clickSession(sessionLi);
        }

        // 模拟点击
        sessionLi.click();

        // 创建一个消息会话
        createSession(friend.friendId, sessionLi);
    }
    let tabSession = document.querySelector('.tab .tab_session');
    tabSession.click();
}


// 通过 指定用户名 返回其所在会话（如果没有会话则返回无效空对象）
function findSessionByName(username) {

    // // 拿到会话列表标签下的 所有会话标签（数组）
    let sessionLis = document.querySelectorAll('#session_list>li');

    for (let sessionLi of sessionLis) {

        // 拿到 消息会话中的 用户名字标签
        // 判断是否为指定用户名
        let h3 = sessionLi.querySelector('h3');
        if (h3.innerHTML == username) {

            // 判定为指定用户名，返回该用户名所在的消息会话
            return sessionLi;
        }
    }

    // 没有指定用户名，返回无效空对象
    return null;
}

function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        url: 'session?toUserId=' + friendId,

        success: function(body) {

            console.log("会话创建成功！ sessionId = " + body.sessionId);

            sessionLi.setAttribute('message_session_id', body.sessionId);
        },
        error: function() {
            console.log('会话创建失败');
        }
    });
}
////////////////////////////////////// 会话模块：新增会话功能/////////////////////////////////////////////////